<template>
	
	<!-- 删除确认弹框
	<uni-popup ref="popup" type="center" 
	:mask-click="true" 
	mask-background-color="rgba(0,0,0,0)" >
		<view class="loading-box">
			<view class="title">提示</view>
			<view class="desc">确定要解绑设备{{SelectDeviceName}}吗？</view>
		    
		    <view class="button-group">
		      <button class="btn cancel-btn" @click="hidePopup">取消 </button>
		      <button class="btn confirm-btn" @click="confirmDeletion">确认</button>
		    </view>
		</view>
	</uni-popup>-->
	
	
	<uni-popup
		ref="popupRef" :type="type" :mask-click="maskClick"
		mask-background-color="rgba(0,0,0,0.0)" 
		:is-mask-click="isMaskClick" :background-color="backgroundColor"
		@maskClick="handleMaskClick"
	  >
		<view class="custom-fullscreen" v-if="showCustom">
			<view class="loading-box" :style="{ backgroundColor }">
			  <!-- 头部 -->
			  <view v-if="showHeader" >
				<text class="title">{{ title }}</text>
			  </view>
			  <!-- 内容区域 -->
			  <view class="desc">
				<slot></slot>
			  </view>
			  
			  <!-- 底部按钮 -->
			  <view v-if="showFooter" class="button-group">
				<button
				  v-for="(btn, index) in buttons"
				  :key="index"
				  class="btn"
				  :class="btn.type"
				  @click="handleButtonClick(btn)"
				>
				  {{ btn.text }}
				</button>
			  </view>
			</view>
		</view>
	</uni-popup>
</template>

<script lang="ts" setup>
import { ref, withDefaults } from 'vue'
import type { UniPopupMethods } from '@dcloudio/uni-ui/lib/uni-popup/uni-popup'

interface ButtonItem {
  text: string
  type?: 'primary' | 'warn' | 'default'
  action?: () => void | Promise<void>
}

interface Props {
  // 弹出类型：center|top|bottom|left|right
  type?: 'center' | 'top' | 'bottom' | 'left' | 'right'
  // 是否显示遮罩层
  maskClick?: boolean
  // 是否点击遮罩层关闭
  isMaskClick?: boolean
  // 背景颜色
  backgroundColor?: string
  // 是否显示头部
  showHeader?: boolean

  // 标题
  title?: string
  // 是否显示关闭按钮
  showClose?: boolean
  // 是否显示底部按钮区域
  showFooter?: boolean
  // 底部按钮配置
  buttons?: ButtonItem[]
}
const showCustom = ref(true)

const props = withDefaults(defineProps<Props>(), {
  type: 'center',
  maskClick: true,
  isMaskClick: true,
  //backgroundColor: '#ffffff',
  showHeader: true,
  title: '提示',
  showClose: false,
  showFooter: true,
  buttons: () => []
})

const emit = defineEmits<{
  (e: 'close'): void
  (e: 'maskClick'): void
  (e: 'buttonClick', button: ButtonItem): void
}>()

// 获取uni-popup实例
const popupRef = ref<UniPopupMethods | null>(null)

// 打开弹出层
const open = () => {
  popupRef.value?.open()
}

// 关闭弹出层
const close = () => {
  popupRef.value?.close()
}

// 切换弹出层状态
const toggle = () => {
  popupRef.value?.toggle()
}

// 处理关闭按钮点击
const handleClose = () => {
  close()
  emit('close')
}

// 处理遮罩层点击
const handleMaskClick = () => {
  if (props.isMaskClick) {
    handleClose()
    emit('maskClick')
  }
}

// 处理底部按钮点击
const handleButtonClick = (btn: ButtonItem) => {
  if (btn.action) {
    btn.action().then(() => {
      emit('buttonClick', btn)
    })
  } else {
    emit('buttonClick', btn)
  }
}

// 暴露方法给父组件
defineExpose({
  open,
  close,
  toggle
})
</script>

<style lang="scss" scoped>

//蒙层样式
.custom-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}
.custom-popup-container {
  width: 600rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  box-sizing: border-box;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .popup-title {
      font-size: 36rpx;
      font-weight: bold;
    }
  }
  
  .popup-content {
    margin-bottom: 30rpx;
  }
  
  .popup-footer {
    display: flex;
    justify-content: flex-end;
    gap: 20rpx;
    
    .footer-btn {
      padding: 0 40rpx;
      height: 70rpx;
      line-height: 70rpx;
      border-radius: 8rpx;
      font-size: 28rpx;
      
      &.primary {
        background-color: #007aff;
        color: #ffffff;
      }
      
      &.warn {
        background-color: #dd524d;
        color: #ffffff;
      }
      
      &.default {
        background-color: #f8f8f8;
        color: #333333;
        border: 1rpx solid #eeeeee;
      }
    }
  }
}

/* Loading弹窗样式 (保持不变) */
	.loading-box {
	  width: 750rpx;
	  height: 350rpx;
	  background-image: url(/static/loading_background.png);
	  background-size: 100% 100%;
	  background-position: center;
	  border-radius: 10rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  position: relative;
	}
	.loading-spinner {
	  width: 40rpx;
	  height: 40rpx;
	  border: 4rpx solid rgba(255, 255, 255, 0.3);
	  border-top: 4rpx solid #fff;
	  border-radius: 50%;
	  animation: spin 1s linear infinite;
	}
	
	.loading-text {
	  margin-top: 10rpx;
	  color: #fff;
	  font-size: 32rpx;
	}
	
	.button-group {
	  display: flex;
	  justify-content: space-between;
	  gap: 24rpx;
	  position: absolute;
	  top:255rpx;
	  height: 48rpx;
	}
	.btn {
	  flex: 1;
	  font-size: 34rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	
	.default {
	  background-color: #F5F5F5 !important;
	  color: #666666 !important;
	}
	
	.primary {
	  background: linear-gradient(90deg, #4A90E2 0%, #5C9EFF 100%) !important;
	  color: #FFFFFF !important;
	}
	
	.content {
	  text-align: center;
	  margin-bottom: 48rpx;
	}
	
	.title {
	  font-size: 36rpx;
	  color: #FFFFFF;
	  font-weight: 500;
	  padding: 0rpx 113rpx 0 115rpx;
	      line-height: 43rpx;
	      box-sizing: border-box;
	}
	
	.desc {
	  font-size: 32rpx;
	  color: #FFFFFF;
	  line-height: 2.7;
	}

</style>